<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<title>汉诺塔-邓永盛</title>
		<style type="text/css">
			h1 {
				font-family: initial;
				font-weight: bold;
				line-height: initial;
			}

			.pillar {
				position: absolute;
				background-color: #626262;
			}

			.h {
				top: 0px;
				left: 50%;
				width: 10px;
				margin-left: -5px;
				height: 100%;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			.v {
				top: 100%;
				left: 0px;
				width: 100%;
				margin-top: -2px;
				height: 3px;
			}

			.disk {
				position: absolute;
				height: 30px;
				border-width: 1px;
				border-color: #989898;
				border-style: solid;
				background-color: #ffff00;
				box-shadow: 0px 2px 6px #888888;
				margin-left: -1px;
				border-radius: 4px;
			}

			.disk:hover {
				box-shadow: 0px 2px 20px #040404;
				background-color: #ffff00;
				transition-duration: 0.15s;
			}

			.range_wapper {
				display: block;
				width: 380px;
				margin-top: 20px;
				margin-bottom: 20px;
			}

			#btn_start {
				margin-top: 6px;
				margin-bottom: 20px;
			}
		</style>
		<script type="text/javascript">
			var speed = 1000;
			var disk_num = 5;
			var interval;
			var para = new Object();
			if (location.href.indexOf('?') > -1) {
				location.href.split('?')[1].split('&').forEach(function(elem) {
					kv = elem.split('=');
					para[kv[0]] = kv[1];
				});
				if (para['n'] != undefined) {
					disk_num = parseInt(para['n']);
				}
			}
		</script>
	</head>
	<body>
		<div class="container">
			<h1 class="text-center">汉诺塔问题</h1>
		</div>
		<div style="display: block;">
			<div class="range_wapper center-block">
				<label style="font-size: 18px;display: inline-block;" id="disk_num_show">盘片个数（）：</label>
				<input style="display: inline-block;max-width: 220px;" id="disk_num" type="range" min="2" max="20" value="3">

			</div>
			<div class="range_wapper center-block">
				<label style="font-size: 18px;display: inline-block;" id="speed_show">速度（500）：</label>
				<input style="display: inline-block;max-width: 220px;" id="speed" type="range" min="50" max="2000" value="500">
			</div>
			<script>
				$('#disk_num_show').text('盘片个数（' + disk_num + '）：');
				$('#disk_num').val(disk_num);
				$('#disk_num').change(function() {
					reinit();
				});
				$('#speed').change(function() {
					speed = parseInt($('#speed').val());
					$('#speed_show').text('速度（'+speed+'）：')
				});
			</script>
		</div>
		<div class="container">
			<div class="container col-sm-12 col-md-4">
				<div class="tower center-block" id="tower1">
					<div class="pillar v"></div>
					<div class="pillar h"></div>
				</div>
			</div>
			<div class="container col-sm-12 col-md-4">
				<div class="tower center-block" id="tower2">
					<div class="pillar v"></div>
					<div class="pillar h"></div>
				</div>
			</div>
			<div class="container col-sm-12 col-md-4">
				<div class="tower center-block" id="tower3">
					<div class="pillar v"></div>
					<div class="pillar h"></div>
				</div>
			</div>
		</div>
		<div class="container">
			<button type="button" class="btn btn-success center-block" id="btn_start">开始移动</button>
		</div>
		<script type="text/javascript">
			// 初始化页面
			function init() {
				// 删除所有的盘片
				$('.disk').remove();
				// 计算盘片高度，生成动态css样式
				document.write(
					`<style type="text/css">
					.tower {
						position: relative;
						border-color: #565656;
						width: 300px;
						height: ` +
					(33 * disk_num + 40) +
					`px;
						display: block;
						margin-top: 10px;
						margin-bottom: 10px;
					}</style>`);
				for (let i = 0; i < disk_num; i++) {
					document.write('<style type="text/css"> .disk-pos-' + i + ' {bottom: ' + (3 + 33 * i) +
						'px;}</style>');
					document.write('<style type="text/css"> .disk-' + i + ' {width: ' + (20 + 60 / disk_num * i) + '%;left: ' +
						(50 - (20 + 60 / disk_num * i) / 2) + '%;}</style>');
				}
				// 生成盘片
				for (let i = 0; i < disk_num; i++) {
					$('#tower1').append('<div class="disk disk-' + (disk_num - i - 1) + ' disk-pos-' + i + '" id="d' +
						(disk_num - i -
							1) +
						'"></div>');
				}
			}
			// 重新加载页面
			function reinit() {
				disk_num = parseInt($('#disk_num').val());
				location.href = location.href.split('?')[0] + '?n=' + disk_num;
			}

			// 移动盘片
			function move(num, src, dst) {
				// 移动元素
				$(dst).append($('#d' + num));
				$('#d' + num).attr('class').split(' ').forEach(function(elem) {
					if (elem.indexOf('pos') > -1) {
						$('#d' + num).removeClass(elem);
					}
				});
				$('#d' + num).addClass('disk-pos-' + ($(dst + ' *').length - 3));
			}

			// 步数统计
			var step = 0;

			// 递归求解部分
			function hanoi(n, A, B, C) {
				if (n == -1) {
					//递归出口
					return;
				}
				if (n == 0) {
					//圆盘只有一个时，只需将其从A塔移到C塔
					//将编b号为1的圆盘从A移到C
					// 延迟移动
					setTimeout(function() {
						move(0, A, C);
					}, step * speed);
					step++;
				} else {
					//否则
					//递归，把A塔上编号1~n-1的圆盘移到B上，以C为辅助塔
					// hanoi(n - 1, A, C, B);
					hanoi(n - 1, A, C, B);
					//把A塔上编号为n的圆盘移到C上
					setTimeout(function() {
						move(n, A, C);
					}, step * speed);
					step++;
					//递归，把B塔上编号1~n-1的圆盘移到C上，以A为辅助塔
					hanoi(n - 1, B, A, C);
				}
			}

			init();
			// 单击开始按钮后的操作
			$('#btn_start').click(function() {
				// 再次点击将重新加载
				$('#btn_start').attr('onclick', 'reinit()');
				$('#btn_start').text('重新开始');
				// 开始递归
				hanoi(disk_num - 1, '#tower1', '#tower2', '#tower3');
			})
		</script>
		<div id="footer" class="footer" style="bottom: 0px; width: 100%;position: fixed;z-index: -10;font-family: Consolas;">
			<style type="text/css">
				.footer {
					text-align: center;
				}

				.footer a {
					color: #000000;
					text-decoration: none;
				}
			</style>
			<p><strong>Copyright</strong> © 2021 <strong>邓永盛</strong>. <strong>All rights reserved.</strong></p>
			<p><a href="https://beian.miit.gov.cn/">鄂ICP备2021018056号-1</a></p>
			<p>
				<a href="https://gitee.com/deng-yongsheng"><strong>Git</strong>主页</a>
				<a href="mailto:dys.tj@qq.com?subject=来自gp.dengyongsheng.cn的访客">Email:dys.tj@qq.com</a>
			</p>
			<script type="text/javascript">
				function setPosition() {
					if (window.innerHeight > document.body.clientHeight) {
						document.getElementById('footer').style.position = 'fixed';
					} else {
						document.getElementById('footer').style.position = 'relative';
					}
					// console.log('body Resize:' + document.body.clientHeight);
				}
				document.body.onresize = setPosition;
				window.onresize = setPosition;
				setPosition();
			</script>
		</div>
	</body>
</html>
